<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:sistema="http://sistema.com.br/jsf">

	<ui:composition template="./templates/main.xhtml">

		<ui:define name="keepAl">
			<a4j:keepAlive beanName="clienteMB"/>
			<a4j:keepAlive beanName="clienteModalMB"/>
		</ui:define>

		<ui:define name="modalPanel">
			<ui:include src="clienteModal.xhtml" />
		</ui:define>

		<ui:define name="head">
			
		</ui:define>

		<ui:define name="carregar">
			<h:outputText value="#{clienteMB.carregar}" />
		</ui:define>

		<ui:define name="onload">
			#{clienteMB.campoNome.elementById}.focus();
		</ui:define>

		<ui:define name="titulo">
			<h:outputText value="#{clienteMB.titulo}" />
		</ui:define>

		<ui:define name="corpo">

			<h2 style="margin: 5px;">
				<h:outputText value="#{clienteMB.titulo}" />
			</h2>

			<fieldset class="lm" style="margin: 0;">
				<h:panelGrid columns="3">
		        	<h:outputText value="#{clienteMB.campoNome.nameDisplay}" />
		        	<h:inputText 
			        	value=      "#{clienteMB.registroPesquisa.nome}" 
			        	id=         "#{clienteMB.campoNome.id}"
			        	size=       "#{clienteMB.campoNome.sizeMax}" 
			        	maxlength=  "#{clienteMB.campoNome.maxlength}" 
			        	onkeypress= "#{clienteMB.campoNome.onkeypress}" />

		        	<a4j:commandButton id="#{clienteMB.submit}" value="#{clienteMB.submit}" action="#{clienteMB.pesquisar}" styleClass="w90 pointer" reRender="panelPaginacao, tabelaDados" />
				</h:panelGrid>
			</fieldset>

			<br />

			<rich:dataTable rows="#{clienteMB.quantidadeLinhasPaginacao}" width="100%" value="#{clienteMB.paginador}" var="registro" id="tabelaDados" styleClass="tabelaDados">	
				<f:facet name="header">  
                          <rich:columnGroup>
                           <rich:column width="15px">
                           	<h:selectBooleanCheckbox id="selecionarTodos" onclick="selecionarTodos()"/>
                           </rich:column>
                              <rich:column styleClass="#{clienteMB.tipoOrdenacaoPaginador.campo == clienteMB.campoNome.id? (clienteMB.tipoOrdenacaoPaginador.tipoOrdenacao == 'ASC'? 'as' : 'ds') : '' }">
                                  <h:commandLink value="#{clienteMB.campoNome.nameDisplay}" action="#">
                              		<a4j:support event="onclick" reRender="panelPaginacao, tabelaDados" action="#{clienteMB.ordenarPaginacaoPorColuna}" immediate="true" ajaxSingle="true" disableDefault="true">
                              			<f:param name="campo" value="#{clienteMB.campoNome.id}"/>
                              		</a4j:support>
                              	</h:commandLink>
                              </rich:column>
                          </rich:columnGroup>
                  	</f:facet>

				<rich:column style="text-align:center" styleClass="naoSelecionado">
					<h:selectBooleanCheckbox value="#{registro.selected}" onclick="selecionarDefault(this)"/>
				</rich:column>
				<rich:column styleClass="naoSelecionado">
                          <a4j:commandLink value="#{registro.nome}" action="#{clienteModalMB.editar}"  reRender="modalPanel">
                          	<f:param name="id" value="#{registro.id}"/>
                          </a4j:commandLink>
                      </rich:column>
			</rich:dataTable>

			<br />
			<sistema:permissaoAcao acao="C" >
				<a4j:commandButton value="#{clienteMB.excluir}" action="#{clienteMB.excluir}" styleClass="w90 pointer" reRender="panelPaginacao, tabelaDados" />
			</sistema:permissaoAcao>
			<rich:spacer width="5px"/>
			<a4j:commandButton value="#{clienteMB.novo}" action="#{clienteModalMB.novo}" styleClass="w90 pointer" reRender="modalPanel" immediate="true" />


			<a4j:outputPanel id="panelPaginacao">
				<rich:datascroller boundaryControls="auto" fastControls="auto" stepControls="hide" for="tabelaDados" pageIndexVar="pageIndex" page="#{clienteMB.paginaAtual}" style="width:100%;" renderIfSinglePage="false" reRender="panelPaginacao, tabelaDados"/>
				<br/>
				<center>
						<h:outputText id="textoPaginacao" value="#{clienteMB.legendaPaginador}" rendered="#{clienteMB.paginador.rowCount gt 0 }"/>
				</center>
			</a4j:outputPanel>
				
			<br/>
			
		</ui:define>

		<ui:define name="javascript">
			function selecionarTodos(){
				var selecionar = document.getElementById("form:tabelaDados:selecionarTodos").checked;
				var campos = document.getElementById("form:tabelaDados").getElementsByTagName("input");
				for(i = 1; i &lt; campos.length; i++) {
					if(campos[i].type == "checkbox") {
						campos[i].checked = selecionar;
						alterarClass(campos[i]);
					}
				}
			}
			function selecionarDefault(campo){
				alterarClass(campo);
				var selecionar = true;
				var campos = document.getElementById("form:tabelaDados").getElementsByTagName("input");
				for(j = 1; j &lt; campos.length; j++) {
					if(campos[j].type == "checkbox") {
						if (! campos[j].checked){
							selecionar = false;
						}
					}
				}
				document.getElementById("form:tabelaDados:selecionarTodos").checked = selecionar;
			}
			function alterarClass(campo){
				var tr = campo.parentNode.parentNode;
				var tds = tr.getElementsByTagName("TD");
				for (k = 0; k &lt; tds.length; k++){
					if (campo.checked){
						tds[k].className = "dr-table-cell rich-table-cell selecionado";
					} else{
						tds[k].className = "dr-table-cell rich-table-cell naoSelecionado";
					}
				}
			}
		</ui:define>
	</ui:composition>

</html>